<template>
  <div class="widget-wrapper drag-handler">
    <div
      v-show="!widget.elProps.hidden"
      :class="[selected ? 'selected' : '']"
      class="static-content-item"
      @click.stop="selectWidget(widget)"
    >
      <div v-show="designer.widget.selectedWidget?.id === widget.id" class="widget-action">
        <span class="widget-action-copy widget-action-item" title="复制">
          <Icon icon="copy" @click.stop="cloneWidget"></Icon>
        </span>
        <span class="widget-action-delete widget-action-item" title="删除">
          <Icon icon="delete" @click.stop="removeWidget"></Icon>
        </span>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="StaticWrapper">
import { computed } from "vue";
import { Icon } from "@/components/Icon";
import { deepClone, generateId } from "../../util/common";

const props = defineProps({
  designer: {
    type: Object
  },
  widget: {
    type: Object
  },
  parentWidget: {
    type: Object
  },
  indexOfParentList: {
    type: Number
  }
});

const selected = computed(() => props.widget!.id === props.designer!.widget!.selectedWidget?.id);

const selectWidget = widget => {
  props.designer!.widget!.selectedWidget = widget;
};

const clone = widget => {
  return deepClone(widget, (data, label) => {
    if (label === "id") {
      return widget.type + generateId();
    }
    return data[label];
  });
};

const cloneWidget = () => {
  if (props.parentWidget) {
    const widgetList = props.parentWidget.widgetList;
    const newCon = clone(props.widget);
    widgetList.splice(props.indexOfParentList + 1, 0, newCon);
    selectWidget(newCon);
  }
};

const removeWidget = () => {
  if (props.parentWidget) {
    const widgetList = props.parentWidget.widgetList;
    let nextSelected = null;
    if (props.indexOfParentList + 1 < widgetList.length) {
      nextSelected = widgetList[props.indexOfParentList + 1];
    } else if (props.indexOfParentList > 0) {
      nextSelected = widgetList[props.indexOfParentList - 1];
    } else if (props.parentWidget && props.parentWidget != props.designer) {
      nextSelected = props.parentWidget;
    }
    widgetList.splice(props.indexOfParentList, 1);
    selectWidget(nextSelected);
  }
};
</script>

<style lang="scss" scoped>
.widget-wrapper {
  position: relative;

  .widget-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    display: flex;
    justify-content: flex-end;

    & > .widget-action-item {
      margin-right: 10px;
      text-align: center;
      border-radius: 50%;
      padding: 2px;
      border: 1px solid;
      cursor: pointer;
      height: 18px;
      z-index: 1;
    }

    & > .widget-action-copy {
      right: 56px;
      border-color: #1296db;
      color: #1296db;
      background: #fff;
      &:hover {
        color: #fff;
        background: #1296db;
      }
    }

    & > .widget-action-delete {
      right: 24px;
      border-color: #d81e06;
      color: #d81e06;
      background: #fff;
      &:hover {
        color: #fff;
        background: #d81e06;
      }
    }
  }
}

.static-content-item {
  min-height: 20px;
  align-items: center;
  padding: 10px;
}

.static-content-item.selected {
  background-color: #66c0b8;
}
</style>
